<template>
  <div>
    <el-row style="margin-top: 40px">
      <el-col :span="12" :offset="6">
        <el-card shadow="hover" style="padding:10px;">
          <el-col :span="18" :offset="2" style="display: flex;justify-content: center">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8188/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-col>
          <el-col :span="18" :offset="2">
          <el-form :model="ruleForm" class="demo-ruleForm" >
            <el-form-item label="账号:">
                <el-input type="text" placeholder="请输入账号" disabled v-model="ruleForm.phone"></el-input>
              </el-form-item>
            <el-form-item label="昵称:">
              <el-input type="text" placeholder="请输入昵称" v-model="ruleForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="地址:">
              <el-input type="text" placeholder="请输入地址" v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%" @click="submitUser" type="primary">点击保存</el-button>
            </el-form-item>
          </el-form>
          </el-col>
        </el-card>

      </el-col>
    </el-row>


  </div>
</template>

<script>
export default {
  name: "UserCore",
  data(){
    return{
      imageUrl: '',
      ruleForm:{
        id:'',
        phone:'',
        nickname:'',
        address:'',
        avatarUrl:'',
        token:''
      }
    }
  },
  inject:['reload'],
  mounted() {
    this.load();
  },
  methods:{
    //初始化
    load(){
      let user = JSON.parse(localStorage.getItem('user'));
      this.ruleForm = user;
      this.imageUrl = user.avatarUrl
    },
    //提交修改结果
    submitUser(){

      this.$api.updateUser(this.ruleForm).then((res)=>{
        console.log(res)

        if (res.code === 200){
          this.$message.success("保存成功!");
          localStorage.setItem('user',JSON.stringify(this.ruleForm));
          this.reload();
        }else{
          this.$message.error("保存失败!昵称重复!");
        }
      })
    },
    //图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res);
      this.ruleForm.avatarUrl = res;
    },
    //上传图片验证
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed red;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  border: 1px dashed black;
  line-height: 178px;

}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border:1px solid black;
}
</style>